<template>
  <div class="couponIndex-container app-container">
    <div class="page-content">
      <div class="content-item">
        <div class="item-title">
          <div></div>
          <div>满减活动券</div>
        </div>
        <div class="item-content">
          <div class="item-top">整机立减</div>
          <div class="item-desc mt16">设备机器中的所有实物商品，均可享受该促销活动价格</div>
          <div class="item-config mt16">目前已配置规则<span class="number-desc">{{ totalNum }}</span>条,已上线规则<span class="number-desc">{{ onlineNum }}</span>条</div>
          <div class="item-button"><el-button type="primary" @click="handleCouponConfig">配置</el-button></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {couponList} from '@/api/coupon'

export default {
  name: 'CouponIndex',
  data() {
    return {
      listQuery: {
        invoke_method: 'load_score_config',
        type_rule_4_score: 109
      },
      totalNum: 0,
      onlineNum: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /*
    * 获取页面数据
    * */
    getList() {
      couponList(this.Qs.stringify(this.listQuery)).then(response => {
        this.totalNum = response.length_4_list
        response.public_score_list.forEach(item => {
          if (item.is_online === 0) {
            this.onlineNum += 1
          }
        })
      })
    },
    /*
    * 配置优惠券
    * */
    handleCouponConfig() {
      this.$router.push({name: 'CouponList', query: {type: '109'}})
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/variables";

.app-container {
  background-color: #f5f5f5;
}
.page-content {
  .content-item {
    width: 25%;
    background-color: #fff;
    box-sizing: border-box;
    border: solid 1px #dadada;

    .item-title {
      font-size: 20px;
      padding: 24px;
      border-bottom: 1px solid #dadada;
    }
    .item-content {
      padding: 24px;
      .item-top {
        color: $mainColor;
      }
      .item-desc {
        line-height: 2;
      }
      .item-config {
        .number-desc {
          color: #e3362a;
        }
      }
      .item-button {
        text-align: right;
        margin-top: 36px;
      }
      .mt16 {
        margin-top: 16px;
      }
    }
  }
}
</style>
